<template>
    <view class="container">
        <!-- 内容主体区域 -->
        <view class="main-content">
            <view class="title-section">
                <text class="badge-dot"></text>
                <text class="badge-dot orange"></text>
                <text class="badge-dot green"></text>
                <text class="badge-dot cyan"></text>
                <text class="badge-dot blue"></text>
                <text class="badge-dot black"></text>
                <text class="badge-dot gray"></text>
                <view class="field-title">
                    <text>任务平台</text>
                </view>
            </view>

            <!-- 搜索框 -->
            <form @submit="onSubmit">
                <view class="form-item">
                    <view class="input-inline">
                        <label>学校</label>
                        <picker v-model="selectedSchoolIndex" :range="schoolOptions" @change="handleSchoolChange" style="margin-left: 32px;">
                            <view class="picker">
                                <text>{{ schoolOptions[selectedSchoolIndex] }}</text>
                            </view>
                        </picker>
                    </view>
                    <view class="input-inline">
                        <label>价格范围</label>
                        <input v-model="priceMin" placeholder="￥" />
                        <text>-</text>
                        <input v-model="priceMax" placeholder="￥" />
                    </view>
                    <view class="input-inline">
                        <label>任务状态</label>
                        <picker v-model="states" :range="stateOptions" mode="selector" @change="handleStateChange">
                            <view class="picker">
                                <text>{{ stateOptions[states] }}</text>
                            </view>
                        </picker>
                    </view>
                    <view class="input-inline">
                        <label>关键词</label>
                        <input v-model="keywords" placeholder="请输入关键词" style="margin-left: 16px;"/>
                    </view>
                </view>
                <view class="search-button">
                    <button type="primary" form-type="submit">搜索</button>
                </view>
            </form>

            <!-- 时间、价格排序按钮 -->
            <view class="sort-section">
                <view class="field-title">
                    <text>任务</text>
                </view>
                <view class="sort-buttons">
                    <text @click="sortByTime">时间最新</text>
                    <text @click="sortByPriceAsc"><text class="iconfont icon-up"></text>价格升序</text>
                    <text @click="sortByPriceDesc"><text class="iconfont icon-down"></text>价格降序</text>
                </view>
                <view class="task-list">
                    <view class="task-item" @click="getTask(7)">
                        <view class="task-title">
                            <text class="badge green">华东政法大学</text>
                            <text class="badge">待解决</text>
                            <text>周末垃圾清理</text>
                        </view>
                        <view class="task-info">
                            <text @click="getPuser(1)">小灰</text>
                            <text>2024-12-18 19:06:37</text>
                            <text><text class="iconfont icon-kiss"></text> 5.0</text>
                            <text><text class="iconfont icon-nums"></text></text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 分页条 -->
            <view class="pagination" v-if="totalPages > 1">
                <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
                <text>{{ currentPage }}/{{ totalPages }}</text>
                <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
            </view>
        </view>

        <!-- 底部区域 -->
        <view class="footer">
            <text>© - 联系校事达官方客服：6666666</text>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 侧边栏菜单显示状态
const showMenu = ref({
    task: false,
    profile: false,
    chat: false,
    friends: false
});

// 搜索框数据
const school = ref('');
const priceMin = ref('');
const priceMax = ref('');
const stateOptions = ['请选择', '待解决', '已关闭', '解决中', '已完成'];
const states = ref(0);
const keywords = ref('');
const schoolOptions = ['请选择', '中南大学', '湖南大学', '长沙大学'];
const selectedSchoolIndex = ref(0);

// 分页相关数据
const currentPage = ref(1);
const totalPages = ref(5);

// 提交搜索表单
const onSubmit = (e) => {
    e.preventDefault();
    // 处理搜索逻辑
};

// 时间排序
const sortByTime = () => {
    // 处理时间排序逻辑
};

// 价格升序排序
const sortByPriceAsc = () => {
    // 处理价格升序排序逻辑
};

// 价格降序排序
const sortByPriceDesc = () => {
    // 处理价格降序排序逻辑
};

// 获取用户信息
const getPuser = (stuid) => {
    uni.navigateTo({
        url: '/pages/userInfo/userInfo'
    });
};

// 获取任务信息
const getTask = (tidstr) => {
    uni.navigateTo({
        url: '/pages/taskInfo/taskInfo'
    });
};

// 选择学校
const handleSchoolChange = (e) => {
    selectedSchoolIndex.value = e.detail.value;
    school.value = schoolOptions[selectedSchoolIndex.value];
    console.log('选择的学校:', school.value);
};

// 切换分页
const changePage = (page) => {
    if (page >= 1 && page <= totalPages.value) {
        currentPage.value = page;
        // 处理分页逻辑，如请求对应页的数据
    }
};

// 处理任务状态选择变化
const handleStateChange = (e) => {
    states.value = e.detail.value;
    console.log('任务状态已更改:', stateOptions[states.value]);
};
</script>

<style scoped>
/* 全局样式 */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 头部样式 */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo image {
    width: 70%;
    height: 100%;
}

.nav-left navigator,
.nav-right navigator {
    margin: 0 10px;
    color: #333;
    text-decoration: none;
}

.user-dropdown {
    position: relative;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 120px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.user-dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content navigator {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
}

/* 侧边栏样式 */
.sidebar {
    width: 200px;
    background-color: #333;
    color: #fff;
}

.nav-item {
    padding: 10px 20px;
    cursor: pointer;
}

.sub-menu {
    display: none;
    padding-left: 20px;
}

.nav-item.active .sub-menu {
    display: block;
}

/* 内容主体样式 */
.main-content {
    flex: 1;
    padding: 20px;
}

.title-section {
    margin-bottom: 20px;
}

.badge-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.badge-dot.orange {
    background-color: orange;
}

.badge-dot.green {
    background-color: green;
}

.badge-dot.cyan {
    background-color: cyan;
}

.badge-dot.blue {
    background-color: blue;
}

.badge-dot.black {
    background-color: black;
}

.badge-dot.gray {
    background-color: gray;
}

.field-title {
    margin-top: 10px;
    font-weight: bold;
}

.form-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

.input-inline {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.input-inline label {
    margin-right: 10px;
}

.input-inline input {
    width: 100px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.picker {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.school-input {
    position: relative;
    margin-left: 32px;
}

.dropdown {
    position: absolute;
    top: 30px;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.dropdown-item {
    padding: 5px 10px;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f2f2f2;
}

.search-button {
    text-align: center;
    margin-top: 10px;
}

.sort-section {
    margin-top: 20px;
}

.sort-buttons {
    display: flex;
    margin-bottom: 10px;
}

.sort-buttons text {
    margin-right: 20px;
    cursor: pointer;
}

.task-list {
    margin-top: 10px;
}

.task-item {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    cursor: pointer;
}

.task-title text {
    margin-right: 10px;
}

.badge {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 3px;
    color: #fff;
}

.badge.green {
    background-color: green;
}

.task-info {
    margin-top: 5px;
    color: #999;
}

.pagination {
    text-align: center;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination button {
    padding: 5px 10px;
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin: 0 10px;
}

.pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.pagination text {
    margin: 0 10px;
    color: #333;
    font-size: 16px;
}

/* 底部样式 */
.footer {
    text-align: center;
    padding: 20px;
    background-color: #f8f8f8;
}
</style>